<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Responsive Admin Dashboard Template">
        <meta name="keywords" content="admin,dashboard">
        <meta name="author" content="skcats">
		<title></title>
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
        <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
        <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
        <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
	</head>
	<style>
    .layui-table-page {
        text-align: center;
    }

    .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #1E9FFF;
    }

    .layui-table-view thead th {
        text-align: center;
        font-weight: bold;
    }
    .layui-table-view tbody td {
        text-align: center;
    }
	</style>
<body>

<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <a lay-event="fh" onclick="javascript:history.back(-1);" href="#" style="text-decoration:none">
            <i class="layui-icon"style="font-size: 20px">&#xe65c;</i>
        </a>
        <button id="add" style="margin-left: 25px" class="layui-btn layui-btn-radius layui-btn-sm">新增</button>
    </div>
</script>

<!--数据表格样式及附件-->	
    <script type="text/html" id="bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>丢弃
    </a>
	</script>



<!--数据表格  数据表格使用的是方法渲染-->
<div class="utable">
<table class="layui-table"
       lay-data="{width:1150,height:500, url:'/dept/deptdata', page:true, id:'tab',toolbar: '#toolbarDemo'}"
       lay-filter="tab">
    <thead>
    <tr>
        <th lay-data="{field:'deptid', width:80, sort: true}">编号</th>
        <th lay-data="{field:'deptname',edit:true}">系名称</th>
        <th lay-data="{field:'remark',edit:true}">说明</th>
        <th lay-data="{fixed: 'right', title:'操作', toolbar: '#bar', width:250}"></th>
    </tr>
    </thead>
</table>
</div>
</body>
<script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">

    layui.use('table', function () {
        var table = layui.table;

        //监听单元格编辑（修改）
        table.on('edit(tab)', function(obj){
            var tr = obj.tr;
            // 单元格编辑之前的值
            var oldtext = $(tr).find("td[data-field='"+obj.field+"'] div").text();
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            $.ajax({
                url: '/dept/update',
                type: 'post',
                data: {
                    deptid:data.deptid,
                    deptname:data.deptname,
                    remark:data.remark,
                },
                dataType: 'json',
                success:function(b){
                    if(b){
                        layer.msg(JSON.stringify("修改成功"));
                    }else {
                        obj.update({deptname:oldtext})
                        layer.msg('系名称重复不可修改', { icon: 5, time: 2000 });
                    }
                },
            })
        });


        //点击添加iframe窗方法
        $("#add").on('click',function(){
            //iframe窗
            layer.open({
                type: 2,
                title: '系别新增',
                maxmin: true, //开启最大化最小化按钮
                area: ['400px', '250px'],
                content: ['/dept/deptadd']//这是链接你的页面地址 url
            });
        })

        //监听行工具事件
        table.on('tool(tab)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除么?', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: '/dept/del',
                        type: 'post',
                        data: {
                            id:data.deptid
                        },
                        success:function(data){
                            if(data){
                                layer.msg(JSON.stringify("删除成功"));
                            }else {
                                layer.msg(JSON.stringify("出了点小问题，删除失败"));
                            }
                        },
                        dataType: 'json',
                    })
                });
            }  else if(obj.event= 'data'){

            }
        })
    });
</script>
</html>